<template>
  <!-- <div>
    <h3>Vue3</h3>
    <input v-model="count" type="text" />
    <p>
      {{ count }}
    </p>
    <button @click="add">++</button>
  </div> -->
  <!-- <Father/> -->
  <Life/>
</template>

<script>
import { reactive, ref, toRefs, toRef } from "@vue/reactivity";
import Father from './components/Father.vue'
import Life from './components/Life.vue'
export default {
  name: "App",
  components: {
    Father,
    Life
  },
  // setup(props)
  setup(props) {
    // setup中没有this
    // console.log(props)
    // // 定义数据 1
    // const num = 100;
    // // 定义数据 2   reactive({})  适合定义复杂的数据类型
    // // 修改数据
    // const num2 = reactive({
    //   count: 123,
    // });
    // const add = () => {
    //   num2.count += 1
    // }
    // // 定义数据 3  ref  在js部分.value   在页面中不需要.value
    // const num3 = ref(888);
    // console.log(num)
    // console.log(num2);
    // console.log(num3)

    // console.log(toRefs(num2))

    // const obj = reactive({
    //   name: "张三",
    // })

    // const { name } = obj

    

    // 加上return 模板里才能读取到
    // return {
    //   num,
    //   ...toRefs(num2),
    //   num3,
    //   add
    // };
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
</style>
